<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/details/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/details/new_file.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/details/gou.css"/>
		<link rel="stylesheet" href="../../css/common.css">
        <script src="../../js/PromiseAjax.js"></script>
		<script src="../../js/cookie.js"></script>
		<script src="../../js/jquery3.5.1.js"></script>
		<style>
			 .pagination{
				display: flex;
				width: 300px;
				text-align: center;
				background-color: rgb(252, 238, 238);
				border-radius: 25px;
				overflow: hidden;
				margin: 0 auto;
			}
			.pagination a{
				width: 30px;
				line-height: 30px;
				color: #404040;
				flex:1;
			}
			.pagination a:nth-child(1) {
				transform: rotate(-45deg) ;
			}
			.pagination .next {
				transform: rotate(45deg) ;
			}
			.pagination a:hover{
				color: rgb(247, 73, 73);
			}
		</style>
	</head>
	<body>
		<div class="gou_bar">
			<div class="inner">
				<a><img src="../../images/logo.png"/></a>
				<a class="toShop" style="float:right;">返回商城</a>
				<!-- <ul class="bar_ul">
				<li>我的购物车</li>
				<li>确认订单信息</li>
				<li>等待付款</li>
				<li>订单执行</li> -->
			</ul>
			</div>
			
		</div>
		
		<div class="shopping">
			<h4>保税区</h4>
			
			<table id="cartTable">
				<thead>
					<tr>
						<th>目录</th>
						<th>商品信息</th>
						<th>商品单价</th>
						<th>数量</th>
						<th>商品类别</th>
						<th>小计</th>
						<th>购买时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
						<td class="goods"><img src="img/images/20150708112148lm2t0.jpg" alt=""/><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）</span></td>
						<td class="price">220.88</td>
						<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
						<td class="subtotal">220.88</td>
						<td class="subtotal">220.88</td>
						<td class="operation"><span class="rtime">退货</span></td>
					</tr> -->
					
				</tbody>
			</table>
			<div class="pagination">
				<!-- <a href="javascript:;" class="prev">⌜</a>
				<a href="javascript:;">1</a>
				<a href="javascript:;">2</a>
				<a href="javascript:;">3</a>
				<a href="javascript:;">4</a>
				<a href="javascript:;">5</a>
				<a href="javascript:;" class="next">⌝</a> -->
			</div>
			<div class="foot" id="foot">

			</div>
		</div>
		
		
		

<!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->

	</body>
	<script>
		// let resId = getCookie("id");
		// let username = getCookie("username");
		// let ulevel = getCookie("ulevel");
		// $(".login-btn").html(username);
		// // console.log(resId,!resId);
		// if (!resId){
		// 	window.location.href = '../../login.html';
		// }
		// ajax({
		// 	url:'../../php/footer.php'
		// }).then(res=>{
		// 	$(".foot").html(res);
		// });
	</script>
    <script>
		$(function(){
			let page = 1 ;
			let perPage = 4 ;
			let uid = getCookie("id");
			// let arr1 = (window.location.search).substr(1,).split("=");
			getList(page);
				function getList(page){
					ajax({
						url:'../../php/index/getData.php',
						method:'post',
						dataType:'json',
						data:{
							opt:'getCarList',
							uid,
							page,
							perPage
						}
					}).then(res=>{
						renderDom(res) ;
						getPage(page,perPage);
					});
				}
				function renderDom(data){
					let bodyEle = document.querySelector("#cartTable > tbody");
					bodyEle.innerHTML = '' ;
					data.forEach((item,key)=>{
						let date = new Date(item['shopTime']*1000);
						let years = date.getFullYear();
						let month = date.getMonth() + 1;
						// console.log(month);
						let datetime = date.getDate();
						let hours = date.getHours();
						let min = date.getMinutes();
						let trEle = document.createElement("tr");
						trEle.innerHTML = ` 
							<td class="checkbox">${key+1}</td>
							<td class="goods"><img style="float:left" src="../../${item['showImg']}" alt=""/><span  style="float:right">【${item['pName']}】${item['pDescribe']}</span></td>
							<td class="price">￥${item['price']}</td>
							<td class="count">${item['pNum']}</td>
							<td class="count">${item['typeName']}</td>
							<td class="subtotal">￥${(parseInt(item['price'] * 100) * item['pNum']) / 100 }</td>
							<td class="subtotal">${years}-${month}-${datetime}/${hours}:${min}</td>
							<td class="operation"><span class="rtime">退货</span></td>`;
						bodyEle.appendChild(trEle);
					});
				}
				// getPage();
				function getPage(page,perPage){
					ajax({
						url:"../../php/index/getData.php",
						method:"post",
						dataType:"json",
						data:{
							opt:'getUPage',
							uid,
							perPage,
						},
						success(data){
							let pageNum = data['totalPage'];
							pageRender(pageNum,page);
						}
					});
				}
				function pageRender(num,page){
					let pagEle = document.querySelector(".pagination");
					pagEle.innerHTML = '' ;
					let str = '' ;
					for(let i = 1 ; i <= num ; i ++ ){
						str += `<a href="javascript:;">${i}</a>`
					}
					pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
									${str}
									<a href="javascript:;" class="next">⌝</a>`;
					let aEles = pagEle.querySelectorAll("a");
					aEles.forEach(function(aEle,key){
						aEle.onclick = function (){
							if( aEle.className == "prev" ){
								if( page > 1 ){
									page = page - 1 ;
									getList(page);
								}
							} else 
							if( aEle.className == "next" ){
								if( page < num ){
									page = page + 1 ;
									getList(page);
								}
							} else {
								page = parseInt(aEle.innerHTML.trim()) ;
								getList(page);
							}
						}
						
					});
				}
				let reShopEle = document.querySelector(".toShop");
				reShopEle.onclick = function (){
					window.location.href = "../../index.html";
				}
		});
        
    </script>
</html>